<template>
  <div class="address-container">
    <!-- head return-->
    <div class="address-head">
      <van-nav-bar :title="$t('h.accPage.address.title')" style="background: #ededed">
        <template #left>
          <van-icon name="arrow-left" size="24" color="black" @click="escAddress" />
        </template>
      </van-nav-bar>
    </div>

    <div>
      <van-address-list
        v-model="selectAddId"
        :list="normalList"
        :disabled-list="disabledList"
        :disabled-text="disabledList.length !== 0 ? '以下地址超出配送范围' : ''"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="selectAddress"
        @select-disabled="UnSelectAddress"
        @edit-disabled="onEdit"
      />
      <van-empty v-show="normalList.length === 0 && disabledList.length === 0" description="请添加地址" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AddList',
  data() {
    return {
      selectAddId: '1',
      normalList: [],
      disabledList: []
    }
  },
  created() {
    this.usableAddress()
  },
  computed: {
    ...mapState({
      addressList: state => state.account.userAddress,
      location: state => state.home.location,
      changeLocation: state => state.home.changeLocation,
      positionMode: state => state.home.positionMode
    })
  },
  methods: {
    // 根据定位分类地址
    usableAddress() {
      var list = this.addressList
      var mode = this.positionMode
      var name = ''

      if (!this.location.location) return this.$msg.warning('当前定位失败，请刷新重试')
      if (mode) {
        name = this.changeLocation.location.cityname
      } else {
        name = this.location.location.city
      }
      // console.log(name)
      this.normalList = list.filter(item => item.address.indexOf(name) !== -1)
      this.disabledList = list.filter(item => item.address.indexOf(name) === -1)
    },
    // 退出地址管理
    escAddress() {
      var query = this.$route.query
      if (query.source === 1) return this.$router.push({ name: 'create' })
      this.$router.push({ name: 'account' })
    },
    // 添加地址
    onAdd() {
      var query = this.$route.query
      this.$router.push({ name: 'addedit', query: query })
    },
    // 编辑地址
    onEdit(item, index) {
      var query = this.$route.query
      this.$router.push({ name: 'addedit', query: query, params: { item } })
    },
    // 确认订单选择的地址
    selectAddress(item) {
      var query = this.$route.query
      if (query.source === 1) {
        this.$store.commit('selectAddress', item)
        this.$router.push({ name: 'create' })
      }
    },
    UnSelectAddress() {
      this.$msg.toast('不可选择', 600)
    }
  }
}
</script>

<style lang="less" scoped>
.address-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}
.van-address-list {
  margin-top: 46px;
  background-color: #ededed;
  .van-address-list__bottom {
    background: #ededed;
  }
  .van-tag--danger {
    background-color: #ffbf05;
  }
  /deep/ .van-address-item .van-radio__icon--checked .van-icon {
    background-color: #ffbf05;
    border-color: #ffbf05;
  }
  .van-button {
    max-width: 640px;
    background: #ffbf05;
    border: none;
    color: white;
    border-radius: 9px;
    margin: 0 auto;
    margin: 0.6em 0;
    font-size: 1em;
  }
}
</style>
